<template>
  <div>
    <x-header
      style="position : fixed;top:0;left:0;z-index:99;width:100%"
      :right-options="{showMore: true}"
      @on-click-more="todetail"
    >{{this.$route.params.name}}</x-header>
    <group title="状态">
      <cell title="连接状态" value="在线"></cell>
      <cell title="上次在线" value="2019年02月14日14:36:48"></cell>

       <popup-picker title="操作" :data="modeList" v-model="mode" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="please select"></popup-picker>


      <cell title="电源状态" value="2019年02月14日14:36:48">
        <mt-switch v-model="isOn" onClick="event.cancelBubble = true" @change="turn"></mt-switch>
      </cell>
    </group>

    <group title="定时">
      <!-- <cell
        title="是否开启定时任务"
        value="2019年02月14日14:36:48"
      >
        <mt-switch
          v-model="timerEnable"
          onClick="event.cancelBubble = true"
          @change="timerEnableChange"
        ></mt-switch>
      </cell>-->
      <lighttimecell
        v-for="item in times"
        v-bind:key="item.timerIndex"
        :itemdata="item"
        :deviceBaseInfo="deviceBaseInfo"
        :deviceId="deviceId"
        :productId="productId"
      ></lighttimecell>
    </group>
  </div>
</template>

<script>
import lighttimecell from "../../components/devicecell/lighttimecell";
import { getMYClient } from "../../js/client";
import { bus } from "../../js/client/bus";
import store from "../../store/store";
import _global from "../../components/Global/Global";
export default {
  name: "lightDetail",
  // props: {
  //   param: {
  //     type: Object
  //   }
  // },
  components: { store, _global, lighttimecell },
  data() {
    return {
      deviceId: this.$route.query.deviceId,
      productId: this.$route.query.productId,
      isOn: false,
      timerEnable: false,
      modeList: [['关闭', '打开', '闪烁', '呼吸灯']],
      mode:['关闭'],
      times: [
        {
          timerIndex: 0
        },
        {
          timerIndex: 1
        },
        {
          timerIndex: 2
        },
        {
          timerIndex: 3
        },
        {
          timerIndex: 3
        },
        {
          timerIndex: 3
        },
        {
          timerIndex: 4
        },
        {
          timerIndex: 5
        },
        {
          timerIndex: 6
        },
        {
          timerIndex: 7
        }
      ],
      deviceBaseInfo: this.$route.params,
      list: [
        {
          label: "ID",
          value: "1231312312321312312312312312312312312312312312312312312312"
        },
        {
          label: "名称",
          value: "张三历史"
        },
        {
          label: "UDID",
          value: "fdsrasdfaseresfasdfasersasssddsddfdddsddfdfs"
        }
      ],
      showMenus: false,
      src:
        "https://ss1.bdstatic.com/5aAHeD3nKgcUp2HgoI7O1ygwehsv/media/ch1/jpg/qingrenjiebeijing.jpg"
    };
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    if (to.path == "/time-range-set") {
      from.meta.keepAlive = true; // B 跳转到 A 时，让 A 缓存，即不刷新
    }

    next();
  },
  mounted: function() {
    this.deviceBaseInfo = this.$route.params;
    let that = this;
    this.$api.device.deviceTopicList("1").then(res => {
      console.info(res.data.data[0].topic);
    });
    bus.$on("msg", function(productId, deviceId, message, topic) {
      var components = topic.split("/");
      if (components[3] == "power") {
        let data = new Uint8Array(message);
        if (data[0] == 0x00) {
          that.isOn = false;
        } else {
          that.isOn = true;
        }
      } else if (components[3] == "mode") {
        let data = new Uint8Array(message);
        if (data[0] == 0x00) {
           that.mode = ["关闭"];
        }else if (data[0] == 0x01) {
          that.mode = ["打开"];
        }else if (data[0] == 0x02) {
          that.mode = ["闪烁"];
        } else if (data[0] == 0x03) {
          that.mode = ["呼吸灯"];
        } 
        
        else {
          
        }
      }

      console.log(message + "哈哈哈哈哈哈啊哈哈哈");
    });
    console.log("mounted" + this.productId + this.deviceId);

    {
      var topic_power =
        "/" +
        String(this.productId) +
        "/" +
        String(this.deviceId) +
        "/power/get";
      getMYClient().mqtt_client.publish(topic_power, "hahaha", 2);
    }

    {
      var topic_timeenable =
        "/" +
        String(this.productId) +
        "/" +
        String(this.deviceId) +
        "/mode/get";
      getMYClient().mqtt_client.publish(topic_timeenable, "hahaha", 2);
    }
  },
  methods: {

    onChange (val) {
      var mode = new Uint8Array(1)
      if(this.mode[0] === '关闭'){
        mode[0] = 0
      }else
      if(this.mode[0] === '打开'){
        mode[0] = 1
      }else
      if(this.mode[0] === '闪烁'){
        mode[0] = 2
      }else

      if(this.mode[0] === '呼吸灯'){
        mode[0] = 3
      }
      
      var enable = new Uint8Array(1)
      enable[0] = this.isOn ? 1 : 0
      var dataBuffer = Buffer.concat([
        Buffer.from(mode),
      ]);

      var productId = this.$route.query.productId;
      var deviceId = this.$route.query.deviceId;
      var topic =
        "/" +
        productId +
        "/" +
        deviceId +
        "/mode/set";
      getMYClient().mqtt_client.publish(topic, dataBuffer,2);
    },
    todetail(params) {
      this.$router.push({
        name: "deviceInfo",
        params: {
          param: this.$route.params
        }
      });
    },
    turn: function() {
      console.log(this.isOn);

      let data = new Uint8Array(1);
      if (this.isOn) {
        data[0] = 0x01;
      } else {
        data[0] = 0x00;
      }

      var topic_power =
        "/" +
        String(this.productId) +
        "/" +
        String(this.deviceId) +
        "/power/set";
      getMYClient().mqtt_client.publish(topic_power, data, 2);
    },
    timerEnableChange: function() {
      console.log(this.timerEnable);
      let data = new Uint8Array(1);
      if (this.timerEnable) {
        data[0] = 0x01;
      } else {
        data[0] = 0x00;
      }

      var topic_entimer =
        "/" +
        String(this.productId) +
        "/" +
        String(this.deviceId) +
        "/timeenable/set";
      getMYClient().mqtt_client.publish(topic_entimer, data, 2);
    }
  },
  computed: {
    count() {
      return store.state.mqttMessage;
      // Or return basket.getters.fruitsCount
      // (depends on your design decisions).
    }
  },
  watch: {
    count(newCount, oldCount) {
      // Our fancy notification (2).
      console.log(`We have ${newCount} fruits now, yaay!`);
    }
  }
};
</script>

<style scoped>
</style>